<template>
  <div class="class padding-b100">
    <search @confirms="search" class="search" :disabled="true"></search>

    <!--  -->
    <div class="class_cont flex" :style="{'height': bottomHeight + 'px'}">
      <!-- 左 -->
      <div class="flex_l">
        <div class="menu_ul" :style="[{'height': menu.length*1.2 + 'rem'}]">
          <div
            :class="['menu_li',status==index?'menu_li_active':'']"
            v-for="(item, index) in menu"
            :key="index"
            @click="menuChange(index,item.id)"
          >{{item.type_name}}</div>
        </div>
      </div>
      <!-- 右 -->
      <div class="flex_r bg-ff flex-grow padding-20">
        <div>
          <!-- 广告位 -->
          <div class="topImg_list" v-if="top.length > 0 && status!=0">
            <div
              v-for="(items,indexs) in top"
              :key="indexs"
              @click="http(items.ad_url)"
              class="topImg"
            >
              <img v-lazy="items.thumb" alt />
            </div>
          </div>
          <div v-if="status == 0">
            <div class="topImg_list" v-if="ad1.length > 0">
              <div
                v-for="(items,indexs) in ad1"
                :key="indexs+'s'"
                @click="http(items.url)"
                class="topImg"
              >
                <img v-lazy="items.thumb" />
              </div>
            </div>
            <div class="_classlist border-bottom">
              <div class="_classlist_title">热门推荐</div>
              <div class="_classlist_ul flex flex-wrap text-center text-content">
                <div
                  class="_classlist_li"
                  v-for="(item,index) in ad2"
                  :key="index"
                  @click="http(item.url)"
                >
                  <img v-lazy="item.thumb" alt />
                  <div class="text-cut-one text-66 rem-26px">{{item.title}}</div>
                </div>
              </div>
            </div>
            <div class="_classlist border-bottom">
              <div class="_classlist_title">为你推荐</div>
              <div class="_classlist_ul flex flex-wrap text-center text-content">
                <div
                  class="_classlist_li"
                  v-for="(item,index) in ad3"
                  :key="index"
                  @click="http(item.url)"
                >
                  <img v-lazy="item.thumb" alt />
                  <div class="text-cut-one text-66 rem-26px">{{item.title}}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 二三级广告 -->
          <classlist v-if="status!=0 && adList.length > 0" :list="adList" :type="1"></classlist>
          <!-- 二三级产品 -->
          <classlist v-if="status!=0" :list="list" :one_id="one_id"></classlist>
        </div>
      </div>
    </div>

    <div style="display: none;">
      <div v-for="(item,index) in menuList" :key="index">
        <div v-for="(items,indexs) in item.twoCate" :key="indexs">
          <p>{{items.type_name}}</p>
          <div v-for="(itemss,indexss) in items.threeCate" :key="indexss">
            <p>{{itemss.type_name}}</p>
            <img :src="itemss.thumb" :alt="itemss.type_name" />
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <footerNav :active="1"></footerNav>
  </div>
</template>
<script>
import { getMenu, getAd, getMenuList } from "../plugins/api.js";
import footerNav from "../components/footer";
import search from "../components/search";
import classlist from "../components/classlist";
export default {
  async asyncData({ req, params, route, app }) {
    // console.log(app.store.state.token);
    // let token = ''
    // if (app.store.state.token != null) {
    //   token = app.store.state.token.split("; ");
    //   for (let t in token) {
    //     if (token[t].split("=")[0] == "TOKEN") {
    //       token = token[t].split("=")[1];
    //     }
    //   }
    // }

    let [menuData, setAd_1, setAd_2, setAd_3] = await Promise.all([
      getMenu(),
      getAd(11, 0, 0),
      getAd(12, 0, 0),
      getAd(13, 0, 0)
    ]);

    let menuDatas = [
      {
        id: false,
        type_name: "推荐项目"
      }
    ];
    let menuListDatas = [];

    for (let i in menuData.data) {
      if (menuData.data[i]) {
        menuDatas.push(menuData.data[i]);
      }

      let menuListData = await getMenuList(menuData.data[i].id);
      menuListDatas.push(menuListData.data);
    }

    return {
      menu: menuDatas,
      ad1: setAd_1.data,
      ad2: setAd_2.data,
      ad3: setAd_3.data,
      menuList: menuListDatas
    };
  },
  components: {
    search,
    footerNav,
    classlist
  },
  data() {
    return {
      menuList: "",
      menu: [],
      list: [],
      adList: [],
      status: 0,
      bottomHeight: "",
      ad1: [],
      ad2: [],
      ad3: [],
      top: [],
      one_id: 0
    };
  },
  mounted() {
    // js获取高度
    this.$nextTick(() => {
      var documentHeight = window.innerHeight;
      this.bottomHeight =
        documentHeight -
        document.documentElement.querySelector(".search").clientHeight -
        document.documentElement.querySelector(".footer_nav").clientHeight;
    });
  },
  methods: {
    search() {
      this.$router.push({ path: "/search/search" });
    },
    // 二三级商品
    menuChange(e, id) {
      this.status = e;
      if (id) {
        this.one_id = id;
        // 二三级广告
        this.$axios
          .post("/wap/enterpriseType/list", {
            one_cate_id: id
          })
          .then(res => {
            this.top = res.data.data.top;
            this.adList = res.data.data.recommend;
            this.list = res.data.data.twoCate;
            document.documentElement.querySelector(".flex_r").scrollTo(0, 0);
          });
      }
    },
    // 携带参数跳转
    to(path, id) {
      if (path.indexOf("http") >= 0) {
        window.open(path, "_blank");
        return false;
      }
      if (id) {
        this.$router.push({
          path: path,
          query: {
            id: id
          }
        });
        return false;
      }
      this.$router.push({
        path: path
      });
    },
    http(path) {
      window.location.href = path;
    }
  }
};
</script>
<style scoped>
.flex_l {
  width: 2.3rem;
  height: 100%;
  overflow-y: scroll;
}
.flex_r {
  width: 5.38rem;
  height: 100%;
  overflow-y: scroll;
}
.menu_li {
  padding: 0.5rem 0;
  font-size: 0.27rem;
  color: #333;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  background: #f9f9f9;
}
.menu_ul .menu_li_active {
  background: white;
  color: #ff0000;
}
.flex_r img {
  width: 100%;
  /* height: 1.35rem; */
}
._classlist {
  padding: 0 0.25rem;
}
._classlist_title {
  padding-top: 0.3rem;
  padding-bottom: 0.74rem;
  font-size: 0.3rem;
  color: #333;
}
._classlist_li {
  width: 33.3%;
  padding-bottom: 0.32rem;
}
._classlist ._classlist_li:nth-of-type(3n) {
  padding-right: none;
}
._classlist_li img {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 5px;
  display: inline-block;
  margin-bottom: 0.19rem;
  object-fit: contain;
}
/* .class_cont{
  overflow: hidden;
} */
.topImg_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.topImg_list .topImg {
  width: 49%;
  margin-bottom: 0.2rem;
  border-radius: 4px;
  overflow: hidden;
}

.topImg_list .topImg img {
  width: 100%;
}
</style>
